<style lang="scss" scoped="">
	@import '../style.scss';


</style>
<template>

  <div class='my_card_outer_b' style="height:44vh;">
    <div class='my_card_b' style="height:42vh;" >
      <div class="my_card_title_b">
        <Icon type="md-stats"  color='rgb(67,158,279)' class="my_card_icon"/>PaaS租户类型
      </div>
      <div style="height:37vh" ref="myEchart">


      </div>
    </div>

  </div>

</template>

<script>
	import echarts from 'echarts'
	import config from '../config.js'
	export default {
		name: 'b_tenant_type_ratio',
    watch: {
      listen_general_data: function(val, oldVal) {
        console.log('new: %s, old: %s', val, oldVal)
        this.initChart(val)
      }
    },
    computed: {
      listen_general_data() {
        return this.$store.state.general_data;
      }
    },
		mounted() {
      if (this.$store.state.general_data!=0){
        this.initChart(this.$store.state.general_data);
      }

		},
		methods: {
			initChart(input_data) {
				let hv = document.body.clientHeight / 100;
				var myChart = echarts.init(this.$refs.myEchart);
				var option = {

					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},

					series: [{
						name: '租户类型占比',
						type: 'pie',
						radius: '70%',
						roseType: 'radius',
						center: ['50%', '50%'],
            data: [{
              value: input_data.tenant_type[0].type_n,
              name: '省级租户',
              itemStyle:{
                color:config.colork['blue']
              }
            },
              {
                value: input_data.tenant_type[2].type_n,
                name: '合作伙伴',
                itemStyle:{
                  color:config.colork['orange']
                }
              },
              {
                value: input_data.tenant_type[1].type_n,
                name: '专业公司',
                itemStyle:{
                  color:config.colork['grass']
                }
              }
            ],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};

				myChart.setOption(option, true);
			}
		}
	}
</script>
